<template>
    <div id="tab_control">
        <div v-for="(item,index) in title" class="tab" v-bind:key="index">
            <span :class="{tab_style: index === currentIndex}" @click="itemClick(index)">{{item}}</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "TabControl",
        props:{
            title:{
                type:Array,
                default(){
                    []
                }
            }
        },
        data(){
            return{
                currentIndex :0
            }
        },
        methods:{
            itemClick(index){
                this.currentIndex = index;
                this.$emit("tabClick",index)
            }
        }
    }
</script>

<style scoped>
#tab_control{
    width: 100%;
    display: flex;
    text-align: center;
    background-color: white;
}
    #tab_control .tab{
        float: left;
        flex: 1;
        height: 40px;
        line-height: 40px;
    }
    .tab_style{
        border-bottom: lightcoral 3px solid;
        color: lightcoral;
    }
</style>